<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
            float: left;
            border: 1px solid black;
        }
        #container{
            width: 50%;
            /*border: 1px solid black;*/
            margin-left: 25%;
            margin-top: 10px;
        }
        #top{
            width: 100%;
            height: 6rem;
        }
        #center{
            width: 100%;
            height: 32rem;
        }
        #bottom{
            width: 100%;
            height: 6rem;
        }
        #left{
            width: 30%;
        }
        #left1{
            height: 11rem;
            width: 100%;
        }
        #left2{
            height: 11rem;
            width: 100%;
        }
        #left3{
            height: 9.5rem;
            width: 100%;
        }
        #right{
            width: 69%;
        }
        #right1{
            height: 15.2rem;
            width: 100%;
        }
        #right2{
            height: 16.5rem;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="top">
        &nbsp;
    </div>
    <div id="center">
        <div id="left">
            <div id="left1">
                &nbsp;
            </div>
            <div id="left2">
                &nbsp;
            </div>
            <div id="left3">
                &nbsp;
            </div>
        </div>
        <div id="right">
            <div id="right1">
                &nbsp;
            </div>
            <div id="right2">
                &nbsp;
            </div>
        </div>
    </div>
    <div id="bottom">
        &nbsp;
    </div>
</div>
</body>
</html>